
<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			table {
				margin: auto;
				border-spacing: 2px;
				padding: 15px;
				background-color: yellowgreen;
			}
			
			table td button {
				width: 45px;
				height: 45px;
			}
			
			#dengyu {
				height: 95px;
			}
			
			#ling {
				width: 95px;
			}
			
			#txt {
				width: 245px;
				height: 50px;
				text-align: right;
				background-color: white;
				color: #0000FF;
			}
			button:hover{
				background-color: #EA6F30;
				cursor: pointer;
			}
			button{
				outline: none;
			}
			#wenzi{
				color: white;
				font-size: 14px;
				text-align: center;
			}
		</style>
	</head>

	<body>
		<table width="250" height="300" border="0" cellspacing="" cellpadding="">
			<tr height="70">
				<th colspan="5" id="txt">
					<!--<input type="text" id="txt" value="0" />-->
				</th>
			</tr>
			<tr>
				<td><button onclick="num()">Sin</button></td>
				<td><button onclick="num()">Cos</button></td>
				<td><button onclick="num()">C</button></td>
				<td><button onclick="num()">±</button></td>
				<td><button onclick="num()">√</button></td>
			</tr>
			<tr>
				<td><button onclick="num()">7</button></td>
				<td><button onclick="num()">8</button></td>
				<td><button onclick="num()">9</button></td>
				<td><button onclick="num()">/</button></td>
				<td><button onclick="num()">%</button></td>
			</tr>
			<tr>
				<td><button onclick="num()">4</button></td>
				<td><button onclick="num()">5</button></td>
				<td><button onclick="num()">6</button></td>
				<td><button onclick="num()">*</button></td>
				<td><button onclick="num()">x³</button></td>
			</tr>
			<tr>
				<td><button onclick="num()">1</button></td>
				<td><button onclick="num()">2</button></td>
				<td><button onclick="num()">3</button></td>
				<td><button onclick="num()">-</button></td>
				<td rowspan="2"><button id="dengyu" onclick="result()">=</button></td>
			</tr>
			<tr>
				<td colspan="2"><button id="ling" onclick="num()">0</button></td>
				<td><button onclick="num()">.</button></td>
				<td><button onclick="num()">+</button></td>
			</tr>
			<tr>
				<td colspan="5" id="wenzi">小马哥专用</td>
			</tr>
		</table>
		<script type="text/javascript">
			//srcElement是IE下的属性            触发当前事件的源对象
			//target是Firefox下的属性
			//Chrome浏览器同时有这两个属性
			var str = " ";
			var re1 = /^[\*|\%±/].+/; //判断开头是不是符号*或、
			var re2 = /.+[\*|\%./]$/; //判断运算符是不是结尾
			function num() {
				var txt = document.getElementById("txt");
				if (event.srcElement.innerHTML == "=") {
					return;
				}
				if (event.srcElement.innerHTML == "C") {
					str = "";
					txt.innerHTML = "0";
					return;
				}
				if (event.srcElement.innerHTML=="Sin") {
					txt.innerHTML=Math.sin(str);
					return;
				}
				if (event.srcElement.innerHTML=="Cos") {
					txt.innerHTML=Math.cos(str);
					return;
				}
				if (event.srcElement.innerHTML == "√") {
					txt.innerHTML = Math.sqrt(str);
					return;
				}
				if (event.srcElement.innerHTML == "x³") {
					txt.innerHTML = Math.pow(str, 3);
					return
				}
				if (str.match(re1)) {
					txt.innerText = "输入错误";
					str = "";
					return;
				}
				if (event.srcElement.id == "txt") {
					return;
				}
				if (event.srcElement.innerHTML == "±" && str != "") {
					str = "-" + "(" + str + ")";
					txt.innerHTML = str;
					return;
				}
				str += event.srcElement.innerHTML;
				txt.innerHTML = str;
			}

			function result() {
				if (str.match(re1) || str.match(re2)) {
					txt.innerText = "输入错误";
					results = "";
					return;
				}
				calresults = eval(str);
				txt.innerHTML = calresults;
			}
		</script>
	</body>

</html>